<template>
	<div>
		<!-- 查询框 -->
		<el-form :inline="true" :model="queryForm" class="demo-form-inline">
		  <el-form-item label="用户姓名">
		    <el-input v-model="queryForm.name" placeholder="用户姓名"></el-input>
		  </el-form-item>
		  <el-form-item label="登录名称">
		    <el-input v-model="queryForm.username" placeholder="登录名称"></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="querySubmit">查询</el-button>
		  </el-form-item>
		</el-form>
		<!-- 列表 -->
		<el-table
		  :data="tableData"
		  @selection-change="handleSelectionChange"
		  style="width: 100%">
		  <!-- 多选 -->
		  <el-table-column
		  type="selection"
		  ></el-table-column>

		  <el-table-column
		  label="#" prop="id"
		  ></el-table-column>

		  <el-table-column
			prop="name"
			label="姓名">
		  </el-table-column>

		  <el-table-column
		  			prop="name"
		  			label="头像">
		  			<template slot-scope="scope">
		  				<img :src="scope.row.headImg" alt="" width="30px;">
		  			</template>
		  </el-table-column>

		  <el-table-column
			prop="username"
			label="登录名称">
		  </el-table-column>

		  <el-table-column
		  			prop="phone"
		  			label="联系电话">
		  </el-table-column>

		  <el-table-column label="状态">
			  <template slot-scope="scope">
				  {{scope.row.enabled==1?'启用':'停用'}}
			  </template>
		  </el-table-column>

		  
		  <el-table-column label="操作" width="300">
			  <template slot-scope="scope">
				  <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
				  <el-button size="mini" type="primary" @click="bindRoles(scope.row)">授权</el-button>
				  <el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
			  </template>
		  </el-table-column>

		</el-table>
		<!-- 分页 -->
		<el-pagination
		  :page-count="pageCount"
		  :current-page="queryForm.current"
		  @current-change="gotoPage"
		  layout="prev, pager, next">
		</el-pagination>

		<div>
			<el-button size="mini" type="danger" @click="batchDel()">批删</el-button>
			<el-button size="mini" @click="add">添加</el-button>
		</div>


		<!-- 对话框添加班级信息 -->
		<el-dialog
		  title="用户/添加/编辑"
		  :visible.sync="dialogVisible"
		  width="40%"
		  :before-close="handleClose">
		  <el-form ref="form" :model="form" label-width="80px">
		    <el-form-item label="用户姓名">
		      <el-input v-model="form.name"></el-input>
		    </el-form-item>

			<el-form-item label="登录名称">
			  <el-input v-model="form.username"></el-input>
			</el-form-item>

			<el-form-item label="用户头像">
			  <el-upload
			    class="avatar-uploader"
			    :headers="{token:token}"
			    :action="$baseUrl+'file/upload/'"
			    :show-file-list="false"
			    :on-success="handleAvatarSuccess">
			    <img v-if="imageUrl" :src="imageUrl" class="avatar">
			    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
			  </el-upload>
			</el-form-item>

			<el-form-item label="联系电话">
			  <el-input v-model="form.phone"></el-input>
			</el-form-item>

		    <el-form-item label="是否启用">
		      <el-switch v-model="form.enabled"></el-switch>
		    </el-form-item>
			<div style="font-size: 20px;">新建用户的默认密码是：123456</div>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="save">确 定</el-button>
		  </span>
		</el-dialog>

		<!-- 用户授权 -->
		<el-dialog
		  title="用户授权"
		  :visible.sync="bindDialogVisible"
		  width="60%"
		  :before-close="handleCloseBindDialog">
		  <el-row style="margin-bottom: 20px;">{{userName}}</el-row>
		  
		   <el-checkbox-group v-model="selectRoleList">
		      <el-checkbox :label="role.id" v-for="role in roleList">{{role.name}}</el-checkbox>
		    </el-checkbox-group>
		  
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="bindDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="saveBindRoles">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				//查询条件
				queryForm:{
					current:1,
					size:6
				},
				//列表数据
				tableData:[],
				//table选择数据Id数组
				selecteIds:[],
				//总页数
				pageCount:1,
				menuList:[],
				dialogVisible:false,
				form:{},
				userInfo:{},
				imageUrl:null,
				bindDialogVisible:false,
				defaultProps:{label:"name"},
				treeData:[],
				userName:null,
				userId:null,
				selectRoleList:[],
				roleList:[]
			}
		},
		methods:{
			handleCloseBindDialog(){
				this.bindDialogVisible = false;
			},
			bindRoles(row){
				console.log(row);
				this.bindDialogVisible = true;
				this.userName = row.name;
				this.userId = row.id;
				//回显数据
				this.axios.get(this.$baseUrl+"/role/getRoleIdsByUserId",{params:{userId:row.id}}).then(res=>{
					this.selectRoleList = res.data.data;
				})

			},
			saveBindRoles(){
				this.axios.post(this.$baseUrl+"/user/authRoles",{id:this.userId,roleIds:this.selectRoleList}).then(res=>{
					if(res.data.result){
						this.bindDialogVisible = false;
						this.$message("授权成功");
					}
				})
			},
			handleAvatarSuccess(res,file){
				console.log(res,file);
				this.imageUrl = res.data.fileUrl;
				this.form.headImg = res.data.fileUrl;
			},
			handleClose(){
				this.dialogVisible = false;
			},
			save(){
				console.log(this.form);
				//ajax提交班级信息
				this.axios.post(this.$baseUrl+"user/save",this.form).then(res=>{
					if(res){
						//关闭对话框
						this.form={};
						this.dialogVisible = false;
						this.$message({
							message:"添加成功",
							type:"success"
						});
						this.querySubmit();
					}
				})
			},
			add(){
				this.form = {};
				this.imageUrl=null;
				this.dialogVisible = true;
			},
			edit(row){
				this.dialogVisible = true;
				this.form = row;
				this.imageUrl = row.headImg;
			},
			del(id){
				console.log(id)
				//调用ajax执行删除操作
				this.axios.post(this.$baseUrl+"/user/batchDel",{idList:[id]}).then(res=>{
					console.log(res);
					//刷新列表页
					if(res.data.result){
						this.querySubmit();
						this.$message("删除成功");
					}else{
						this.$message("删除失败");
					}
				})
			},
			handleSelectionChange(rows){
				console.log(rows);
				// let ids = rows.map(function(row){return row.id});
				let ids = rows.map(row=>{return row.id});
				this.selecteIds = ids;
				console.log("selecteIds:"+this.selecteIds);
			},
			gotoPage(current){
				this.queryForm.current = current;
				this.list();
			},
			querySubmit(){
				//发送ajax请求，根据queryForm查询数据
				console.log(this.queryForm);
				this.queryForm.current=1;
				this.list();

			},
			//列表页数据
			list(){
				//发送ajax请求，根据queryForm查询数据
				this.axios.get(this.$baseUrl+"user/list",{params:this.queryForm}).then(res=>{
					//axios封装了结果，res.data是我们接口的数据
					console.log(res.data);
					this.tableData = res.data.data.records;
					//设置分页数量、当前页
					this.pageCount = res.data.data.pages;
					this.queryForm.current = res.data.data.current;
				})
			},
			/* 查询所有角色 */
			listRole(){
				this.axios.get(this.$baseUrl+"role/allRoleList").then(res=>{
					this.roleList = res.data.data;
				})
			}
		},
		created(){
			this.list();
			this.listRole();
			this.token = localStorage.getItem("token");
		}
	}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
